import React, { useEffect } from "react";
import "./BottomMenu.css";
import { Image } from 'react-vant';
import { useNavigate } from "react-router-dom";

const BottomMenu: React.FC = () => {
    const [active, setActive] = React.useState(0);
    const navigate = useNavigate();

    const handleNavigate = (index: number, e: string) => {
        setActive(index)
        navigate(e)
        if(index==0){
            sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
        }
        if (index == 1) {
            sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
        }
    }
    const styles = {
        active: {
            color: '#000000',
            fontWeight: '700'
        }
    }
    return (
        <div className="MenuItem">
            <span style={active == 0 ? styles.active : {}} onClick={()=>handleNavigate(0,'show')}>首页</span>
            <span style={active == 1 ? styles.active : {}} onClick={() => handleNavigate(1, 'service')}>服务</span>
            <Image style={{ marginTop: '5px' }} width='51' height='37' onClick={() => handleNavigate(4, 'fileUploader')} src='https://cdn8.axureshop.com/demo2024/764739/images/1_1%E9%A6%96%E9%A1%B5/u331.png' />
            <span style={active == 2 ? styles.active : {}} onClick={() => handleNavigate(4, 'message')}>消息</span>
            <span style={active == 3 ? styles.active : {}} onClick={() => handleNavigate(3, 'my')}>我的</span>
        </div>
    )
}

export default BottomMenu;